<template>
  <div class="video-player">
    <div :id="randId" ref="container" @click="tapPlayer"></div>
  </div>
</template>


<script lang="ts">

// @ts-nocheck
import { ref } from "vue";
import { onMounted, onUnmounted } from "vue";
import StrUnit from '/@/utils/shf/StrUnit';
// import WvpReq from "@/utils/WvpReq";

export default {
  name: "xgFlvPlayer",
  props: ["src", "itemid", "deviceid"],
  setup(props) {
    let xgplayer:Player = null; 
    const itemId = ref(props.itemid);
    const randId = ref(StrUnit.getUUID())
    const deviceId = ref(props.deviceid);

    const container = ref(null);
    const buffer = ref(null);
    const showBandwidth = ref(false);
    const showOperateBtns = ref(true);
    const forceNoOffscreen = ref(false);
    const playUrl = ref(props.src);
    const playing = ref(false);
    const quieting = ref(true);
    const loaded = ref(false);
    const tapPlayer = ()=>{
      console.log("tapPlayer");
    }
    const createJessibuca = () => {
      let url = playUrl.value;
      console.log("url = "+url);
      const config = {
        id: randId.value,
        url,
         width: "100%",
      height: "100%",
        // playsinline: isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
        'x5-video-orientation': 'portraint',
        videoInit: true,
        volume:0,
        closeVideoClick:true,
        autoplay: true,
        screenShot: true, //显示截图按钮
        videoAttributes: {
          crossOrigin: ''
        },
        crossOrigin:true,
        cors:true,
        "playsinline": true,
        "whitelist": [
            ""
        ]
      };
      xgplayer = new FlvJsPlayer(config);

      if (xgplayer) {
        /* 这里注册监听 */
        // 监听视频开始播放 播放传给父组件的是true 
        let con = container;
        let video = con.value.getElementsByTagName('video')[0];
        video.addEventListener("click",()=>{
          console.log("click video >>>>>>>");
           con.value.parentNode.parentNode.dispatchEvent(new Event('click'));
        });
        xgplayer.once('ready',()=>{
          
        })
        xgplayer.on('play', () => {
          console.log("play >>>>>>>");
        //   this.$emit('triggerEvent', true);
        });
        // 监听视频已经暂停 暂停传给父组件的是true 
        xgplayer.on('pause', () => {
          console.log("pause >>>>>>>");
        //   this.$emit('triggerEvent', false);
        });
        // 监听 视频退出全屏 
        // this.player.on('exitFullscreen', () => {
        //   window.scrollTo(0, 0);
        //   console.log('已经退出全屏了');
        // });
      }
    
    };

    onMounted(() => {
      createJessibuca();
    });

    onUnmounted(() => {
      let playurl = playUrl.value;
      xgplayer &&  xgplayer.destroy(false);

      let urlArr = playurl.split("/rtp/");
      if (urlArr.length >= 2) {
        let nowArr = urlArr[1].split(".live");
        if (nowArr.length >= 2) {
          let lastArr = nowArr[0].split("_");
          if (lastArr.length >= 2) {
            let id = lastArr[1];
            let deviceId = lastArr[0];
            // WvpReq.closeStream(id, deviceId);
          }
        }
      }
    });

    const play = () => {
      if (playUrl.value) {
        xgplayer.play();
      }
    };
    const pause = () => {
      if (xgplayer) {
        xgplayer.pause();
      }
      playing.value = false;
    };

    const destroy = () => {
      if (xgplayer) {
        xgplayer.destroy(false);
      }
      playing.value = false;
      loaded.value = false;
    };
   const isAppleDevice = ()=> {
      const ua = navigator.userAgent.toLowerCase();
      return /iphone|ipad|phone|Mac/i.test(ua);
    }

    return {
      container,
      buffer,
      showBandwidth,
      playing,
      playUrl,
      play,
      pause,
      destroy,
      loaded,
      randId,
      tapPlayer
    };
  },
};
</script>

<style lang="less" scoped>
.video-player {
  overflow: hidden;
  color: #ffffff;
  height: 100%;
  width: 100%;
  background: #003a55;
  text-align: center;
  vertical-align: middle;

  //border-left: 1px #5d6c7b solid;
  //border-bottom: 1px #5d6c7b solid;

  video {
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  .loading {
    z-index: 999;
    position: relative;
    opacity: 0.5;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column;

    image {
      z-index: 999;
    }

    span {
      z-index: 999;
      margin-top: 5px;
      display: block;
      font-size: 11px;
    }
  }

  .player-tools-box {
    padding: 3px;
    height: 28px;
    line-height: 22px;
    background: #8c939d;
    opacity: 0.8;
    width: 100%;
    position: absolute;
    bottom: 0px;

    .content {
      float: right;
      margin-right: 10px;

      svg {
        cursor: pointer;
        margin-left: 5px;
      }
    }
  }
}

.video-player:hover {
  .player-tools-box {
    margin-top: -28px;
  }
}
.videoOne {
  height: inherit;
  width: inherit;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
</style>
